<script setup lang="ts">
import { ref } from 'vue';
import { localCache } from '@/util/cache.ts'
import { Token } from '@/global/constants.ts'
import { useRouter } from 'vue-router'

defineProps({
  isReduce: {
    type: Boolean,
    default: false
  }
})

const isHovered = ref(false);
const router = useRouter()
function clearCache(){
  if (isHovered.value){
    //  删除token 和用户信息
    localCache.removeCache(Token)
    localCache.removeCache("userinfo")
    // // 刷新浏览器
    // location.reload(true)
    // 跳转到登录页
    router.push('/login')
  }

}

</script>

<template>
  <button
    class="svg-power-btn"
    @click="clearCache"
    @mouseenter="isHovered = true"
    @mouseleave="isHovered = false"
    title="点击清除浏览器缓存并退出"
    :style="isReduce ? 'padding: 10px' : 'padding: 28px'"
    style="transition: padding 0.8s ease-in-out;"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 100"
      :width="isReduce ? 40 : 80"
      :height="isReduce ? 40 : 80"
      style="transition: width 0.5s ease, height 0.5s ease;"
    >
      <!-- 外圆 -->
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="#f5f5f5"
        stroke="#ddd"
        stroke-width="2"
      />

      <!-- 电源符号背景 -->
      <circle
        cx="50"
        cy="35"
        r="20"
        :fill="isHovered ? '#ff6b6b' : '#51cf66'"
        stroke="#333"
        stroke-width="1.5"
        opacity="0.9"
      />

      <!-- 电源符号 - 垂直线 -->
      <line
        x1="50"
        y1="20"
        x2="50"
        y2="30"
        stroke="#fff"
        stroke-width="3"
        stroke-linecap="round"
      />

      <!-- 电源符号 - 半圆 -->
      <path
        d="M 50 30 A 6 6 0 0 1 44 36 A 6 6 0 0 1 50 42"
        stroke="#fff"
        fill="none"
        stroke-width="3"
        stroke-linecap="round"
      />

      <!-- EXIT文字 -->
      <text
        x="50"
        y="75"
        text-anchor="middle"
        font-size="20"
        font-weight="bold"
        :fill="isHovered ? '#ff6b6b' : '#51cf66'"
      >退出</text>
    </svg>
  </button>
</template>


<style scoped>
.svg-power-btn {
  border: none;
  background: none;
  cursor: pointer;
  margin: 0;
  outline: none;
  transition: all 0.5s ease;
}

.svg-power-btn:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 5px rgba(0,0,0,0.2));
}

.svg-power-btn:active {
  transform: scale(0.95);
}

/* 添加点击动画 */
@keyframes clickEffect {
  0% { transform: scale(1); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.svg-power-btn:active svg {
  animation: clickEffect 0.3s ease;
}
</style>
